<template>
  <div>
    <div id="map-container"></div>
  </div>
</template>

<script>
  import { queryAllProjectAndDevice } from "@/api/chart/index.js"
  import AMapLoader from "@amap/amap-jsapi-loader" // 按需引入依赖
  window._AMapSecurityConfig = {
    securityJsCode: "b5bc4f83bbcd458beb0f12f912d4a398" // 安全密钥
  }
  export default {
    data() {
      return {
        map: null,
        mouseTool: null,
        overlays: [],
        auto: null,
        placeSearch: null,
        infoWindow: null,
        mapList: [],
        allMarker: []
      }
    },
    watch: {
      mapList: {
        handler(n, m) {
          this.initMap()
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.queryAllProjectAndDevice()
    },
    mounted() {
      this.initMap()
    },
    methods: {
      async queryAllProjectAndDevice() {
        const data = await queryAllProjectAndDevice()
        this.mapList = data.object
      },
      // 初始化地图2
      initMap() {
        AMapLoader.load({
          key: "4c1333a4be7bf72c5b683df714e3a01d", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
            "AMap.Scale",   // 比例尺
            "AMap.ToolBar", // 工具条
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.MapType",
            "AMap.HawkEye"
          ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("map-container", {
            viewMode: "2D", //  是否为3D地图模式
            // zoom: 10.5, // 初始化地图级别
            zoom: 5, // 初始化地图级别
            center: [112, 35.42],
            resizeEnable: true
          })

          // 添加左下角的比例尺
          this.map.add(new AMap.Scale())
          let toolBar = new AMap.ToolBar({
            position: {
              bottom: "210px",
              right: "35px"
            }
          })
          let controlBar = new AMap.ControlBar({
            position: {
              bottom: "280px",
              right: "10px"
            }
          })
          // 鼠标点击获取经纬度
          this.map.on("click", function(e) {
            // console.log("e---", e)
            // console.log("e.lnglat---", e.lnglat)
            console.log("经度", e.lnglat.getLng())
            console.log("纬度", e.lnglat.getLat())
          })
          // 地图上绘制点位
          this.mouseTool = new AMap.MouseTool(this.map)

          // 监听draw事件可获取画好的覆盖物
          this.mouseTool.on("draw", function(e) {
              console.log("获取画好的覆盖物", e)
              this.overlays.push(e.obj)
            }.bind(this)
          )

          this.map.addControl(toolBar) // 添加右下角的放大缩小
          this.map.addControl(controlBar) // 方向盘
          this.map.addControl(new AMap.MapType()) // 添加右上角的标准图和卫星图  和路况
          this.map.addControl(new AMap.HawkEye()) // 添加地图放大镜
          this.infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: this.createInfoWindow("111"),
            offset: new AMap.Pixel(16, -25)
          })
          // this.map.on("zoomend", () => {
          //   let zoom = this.map.getZoom()
          //   if (zoom > 11) {
          //     this.setMarker(this.mapList)
          //   } else {
          //     this.map.remove(this.allMarker)
          //   }
          // })
          this.setMarker(this.mapList)
        }).catch((e) => {
          console.log(e)
        })
      },
      setMarker(markerList) {
        this.map.remove(this.allMarker)
        // 图标
        const icon = new AMap.Icon({
          // size: new AMap.Size(40, 50), // 图标尺寸
          // image: require("@/assets/map-img/chartIcon.gif") // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
          // imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
        })
        this.allMarker = []
        markerList.map((e) => {
          const str = e.projectLatitude.split(",")
          var marker = new AMap.Marker({
            position: str
            // icon: icon
            // offset: new AMap.Pixel(-13, -30)
          })
          marker.data = e
          marker.on("mouseover", (e) => {
            this.infoWindow.setContent(this.createInfoWindow(e.target.data))
            console.log("markerMouseOver", e.target.data)
            this.infoWindow.open(this.map, e.target.getPosition())
          })
          marker.on("mouseout", (e) => {
            this.map.clearInfoWindow()
          })
          // marker.on("click", (e) => {
          //   console.log(111, e)
          //   if (e.lnglat) {
          //     this.infoWindow.setContent(this.createInfoWindow(e.target.data))
          //     // console.log('markerMouseOver',e)
          //     this.infoWindow.open(this.map, e.target.getPosition())
          //     // window.open(e.target.url)
          //   }
          // })
          marker.emit("click", { target: marker })
          this.allMarker.push(marker)
        })
        // 将 markers 添加到地图
        this.map.add(this.allMarker)
      },
      createInfoWindow(val) {
        let info =
          "<div class=\"map-box\">" +
          "  <div class=\"title slh\">" + val.customerName + "</div>" +
          "  <div class=\"message\">" +
          "    <div class=\"message_item\" style=\"width: 60%;\">" +
          "      <span class=\"myround\"></span>" +
          "      <span class=\"message_item_key\">项目名称：</span>" +
          "      <span class=\"message_item_value\">" + val.projectName + "</span>" +
          "    </div>" +
          "    <div class=\"message_item\" style=\"width: 40%;\">" +
          "      <span class=\"myround\"></span>" +
          "      <span class=\"message_item_key\">项目类型：</span>" +
          "      <span class=\"message_item_value\">" + val.projectType + "</span>" +
          "    </div>" +
          "    <div class=\"message_item\" style=\"width: 100%;\">" +
          "      <span class=\"myround\"></span>" +
          "      <span class=\"message_item_key\">项目位置：</span>" +
          "      <span class=\"message_item_value\">" + val.projectLocation + "</span>" +
          "    </div>" +
          "  </div>" +
          "  <div class=\"num\">" +
          "    <div>" +
          "      <div class=\"deviceCount_key\">设备数量</div>" +
          "      <div class=\"deviceCount_value\">" + val.deviceCount + "</div>" +
          "    </div>" +
          "    <div>" +
          "      <div class=\"applicationScenarioCount_key\">应用场景数量</div>" +
          "      <div class=\"applicationScenarioCount_value\">" + val.applicationCount + "</div>" +
          "    </div>" +
          "  </div>" +
          "</div>"
        // "<div class=\"map-box\">" +
        // "<div class=\"title\">" +
        // "鼎高信息科技有限公司" +
        // "</div>" +
        // "<div class=\"message\">" +
        // "<div class=\"name\">" + "项目名称:" + "<span class=\"pro-name\">" + val.projectName + "</span>" + "</div>" +
        // "<div class=\"type\">" + "项目类型:" + "<span class=\"pro-type\">" + val.projectType + "</span>" + "</div>" +
        // "</div>" +
        // "<div class=\"num\">" +
        // "<div class=\"sb-num\">" +
        // "<div class=\"sb-name\">" + "设备数量(台)" + "</div>" +
        // "<div class=\"num\">" + "23" + "</div>" +
        // "</div>" +
        // "<div class=\"cj-num\">" +
        // "<div class=\"cj-name\">" + "应用场景数量(台)" + "</div>" +
        // "<div class=\"num\">" + "24" + "</div>" +
        // "</div>" +
        // "</div>" +
        // "</div>"
        return info
      },
      // 具体画图代码
      draw(type) {
        switch (type) {
          case "marker": {
            this.mouseTool.marker({
              //同Marker的Option设置
            })
            break
          }
          case "polyline": {
            this.mouseTool.polyline({
              strokeColor: "#80d8ff"
              //同Polyline的Option设置
            })
            break
          }
          case "polygon": {
            this.mouseTool.polygon({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff"
              //同Polygon的Option设置
            })
            break
          }
          case "rectangle": {
            this.mouseTool.rectangle({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff"
              //同Polygon的Option设置
            })
            break
          }
          case "circle": {
            this.mouseTool.circle({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff"
              //同Circle的Option设置
            })
            break
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .map-box {
    width: 388px;
    height: 250px;
    padding-top: 5px;
    background: url("../../assets/img/chartBg.png") no-repeat;
    background-size: 100%;
    /*border-radius: 4px;*/
    cursor: pointer;

    .slh {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .title {
      width: 120px;
      height: 20px;
      margin: 0 auto 0;
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
      color: #ffffff;
      text-align: center;
    }

    .message {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      font-size: 12px;
      margin-top: 35px;
      padding: 0 30px;

      .message_item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50%;
        margin-bottom: 20px;

        .myround {
          content: '';
          display: block;
          width: 5px;
          height: 5px;
          background: #ffac4b;
          border-radius: 50%;
          margin-right: 5px;
        }

        .message_item_key {
          display: inline-block;
          color: #f4f4f4;
        }

        .message_item_value {
          display: inline-block;
          color: #ffffff;
        }
      }
    }

    .num {
      display: flex;
      justify-content: space-around;
      padding: 0 20px;
      margin-top: 38px;
      font-size: 12px;

      .deviceCount_key {
        margin-bottom: 10px;
        color: #ffffff;
      }

      .deviceCount_value {
        font-size: 20px;
        color: #50fda5;
        text-align: center;
      }

      .applicationScenarioCount_key {
        margin-bottom: 10px;
        color: #ffffff;
      }

      .applicationScenarioCount_value {
        font-size: 20px;
        color: #fee251;
        text-align: center;
      }
    }
  }


  /*.map-box {*/
  /*  width: 340px;*/
  /*  padding-top: 25px;*/
  /*  height: 203.32px;*/
  /*  background: url("../../assets/map-img/Frame 734.png") no-repeat;*/
  /*  background-size: 100% 100%;*/
  /*  border-radius: 4px;*/
  /*  .title {*/
  /*    width: 300px;*/
  /*    margin: 0 auto 15px;*/
  /*    font-weight: 700;*/
  /*    font-size: 18px;*/
  /*    line-height: 22px;*/
  /*    color: #343434;*/
  /*    text-align: center;*/
  /*  }*/
  /*  .message {*/
  /*    padding: 10px 0;*/
  /*    display: flex;*/
  /*    justify-content: space-around;*/
  /*    .name {*/
  /*      font-weight: 600;*/
  /*      .pro-name {*/
  /*        font-weight: 400;*/
  /*      }*/
  /*    }*/
  /*    .type {*/
  /*      font-weight: 600;*/
  /*      .pro-type {*/
  /*        font-weight: 400;*/
  /*      }*/
  /*    }*/
  /*  }*/
  /*  .num {*/
  /*    padding: 10px 0;*/
  /*    display: flex;*/
  /*    justify-content: space-around;*/
  /*    .sb-num {*/
  /*      font-weight: 600;*/
  /*      .num {*/
  /*        font-size: 28px;*/
  /*        color: #07c160;*/
  /*      }*/
  /*    }*/
  /*    .cj-num {*/
  /*      font-weight: 600;*/
  /*      .num {*/
  /*        font-size: 28px;*/
  /*        color: #f66cae;*/
  /*      }*/
  /*    }*/
  /*  }*/
  /*}*/
</style>
<style scoped>
  #map-container {
    overflow: hidden;
    width: 100%;
    height: 95vh;
    margin: 0;
  }
</style>
